<template>
    <view class="container">
        <view class="form-wrap">
            <uni-forms label-position="top">
                <!-- 申请内容 -->
                <uni-forms-item label="申请内容">
                    <uni-easyinput type="textarea" :primaryColor="global.THEME_COLOR" autoHeight v-model="params.apply" placeholder="请输入内容" />
                </uni-forms-item>

                <!-- 设置备注 -->
                <uni-forms-item label="设置备注">
                    <uni-easyinput type="text" :primaryColor="global.THEME_COLOR" v-model="params.note" placeholder="请输入内容" />
                </uni-forms-item>
            </uni-forms>
        </view>

        <!-- 添加标签与描述区域开始 -->
        <view class="label-wrap">
            <view class="title-box">添加标签与描述</view>
            <TridentCellItem :item="{title: '标签'}"/>
            <TridentCellItem :item="{title: '描述'}"/>
        </view>
        <!-- 添加标签与描述区域结束 -->

        <!-- 设置好友权限区域开始 -->
        <view class="permission-wrap">
            <view class="title-box">设置好友权限</view>
            <view class="item-box">
                <span>聊天、好友圈</span>
                <i class="iconfont icon-duigou"></i>
            </view>
            <view class="item-box">
                <span>仅聊天</span>
                <i class="iconfont icon-duigou"></i>
            </view>
        </view>
        <!-- 设置好友权限区域结束 -->

        <!-- 发送按钮 -->
        <view class="btn-wrap">
            <view class="btn" @click="handleSendApply">发 送</view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores'
import { reqAddFriendApplyAPI } from '@/apis/friendApply'
import type { AddFriendApplyParams } from '@/types/friendApply'
import { inject, reactive } from 'vue'



// --------------- 定义全局变量开始 ---------------
const global: any = inject('global')

// 用户存储
const userStore = useUserStore()

// 获取页面参数
const query = defineProps({
    "uid": {
        type: String,
        default: '0'
    }
})
// --------------- 定义全局变量结束 ---------------



// --------------- 处理申请好友开始 ---------------
const params = reactive<AddFriendApplyParams>({
    respondent_id: query.uid as never,
    label: '',
    desc: '',
    permission: [],
    apply: '我是' + userStore.profile.user?.username,
    note: '',
    network: 'ws'
})

// 处理发送申请
const handleSendApply = async () => {
    await reqAddFriendApplyAPI(params)
    uni.showToast({
        title: '申请成功',
        duration: 1000
    })
    setTimeout(() => {
        uni.switchTab({ url: '/pages/index/index' })
    }, 1000)
}
// --------------- 处理申请好友结束 ---------------
</script>

<style scoped lang="scss">
.container {
    .form-wrap {
        margin: 20rpx 20rpx 0 20rpx;
        padding: 10rpx 20rpx;
        background-color: #fff;
        border-radius: 20rpx;
    }

    // 添加标签与描述区域开始
    .label-wrap {
        margin: 20rpx 20rpx 0 20rpx;
        padding: 20rpx;
        border-radius: 20rpx;
        background-color: #fff;
        .title-box {
            font-size: 28rpx;
            border-bottom: 2rpx solid #f6f6f6;
            padding-bottom: 20rpx;
        }
    }

    // 设置好友权限区域开始
    .permission-wrap {
        margin: 20rpx 20rpx 0 20rpx;
        padding: 20rpx;
        border-radius: 20rpx;
        background-color: #fff;
        .title-box {
            font-size: 28rpx;
            border-bottom: 2rpx solid #f6f6f6;
            padding-bottom: 20rpx;
        }

        .item-box {
            display: flex;
            padding: 30rpx 20rpx;
            border-bottom: 2rpx solid #f6f6f6;
            color: #000;
            justify-content: space-between;
            align-items: center;
            &:last-child {
                border-bottom: none;
            }
            .iconfont {
                color: $uni-color-primary;
                font-size: 40rpx;
            }
        }
    }

    .btn-wrap {
        margin: 30rpx;
        display: flex;
        justify-content: center;
        .btn {
            width: 60%;
            padding: 15rpx 0;
            background-color: $uni-color-primary;
            color: #fff;
            font-size: 32rpx;
            border-radius: 10rpx;
            text-align: center;
        }
    }
}
</style>